<template>
  <div class="content-box">
    <e-heading>
      {{title}}
      <router-link :to="{path: '/training/class/history', query: {classId: $route.query.id, curoseId: $route.query.crruid, curtype: 1, classname: classData.trainClassName}}" tag="a" class="link_class">上课记录</router-link>
    </e-heading>
    <div class="class_show">
      <el-button :plain="true" type="success" @click="gradeDetailState = !gradeDetailState">
        班级概况 <i :class="gradeDetailState ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
      </el-button>
      <el-collapse-transition>
        <Situation v-show="gradeDetailState"
          :classData="classData"
          :courseType="2"
        />
      </el-collapse-transition>
      <!--serach-->
      <div class="ctime_serach">
        <el-form v-bind="getFormProps()" label-width="80px" label-position="left" style="margin:0 10px;">
          <el-row>
            <el-col :span="24">
              <el-form-item label="报名校区：" label-width="101px">
                <el-checkbox-group v-model="form.campus">
                  <el-checkbox v-for="item in train_scholl_type_list" :key="item.key" :label="item.key">{{item.value}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="上课状态：" label-width="101px">
                <el-checkbox-group v-model="form.classState">
                  <el-checkbox label="0">待上课</el-checkbox>
                  <el-checkbox label="1">上课中</el-checkbox>
                  <el-checkbox label="2">已上完</el-checkbox>
                  <el-checkbox label="3">已冻结</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <span style="line-height:36px;">其他筛选：</span>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" label-width="0">
                <el-checkbox v-model="form.isRemind" true-label="1" false-label="0">提醒续费的学员</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" label-width="0">
                <el-checkbox v-model="form.isExpires" true-label="1" false-label="0">有效期内的学员</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" label-width="0">
                <el-checkbox v-model="form.isTrailClass" true-label="1" false-label="0">试课学员</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="" label-width="0">
                <el-input size="small" v-model="form.studentName" placeholder="请输入搜索内容" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label-width="20px">
                <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table_title">
        <el-row>
          <el-col :span="12">
            <span class="tl">学员列表 {{distinctPerson}}人</span>
            <el-button class="menu-button" :plain="true" type="success" size="small" v-popover:tableMenuItemPopover>
              显示项目
              <i class="el-icon-caret-bottom"></i>
              <el-popover
                ref="tableMenuItemPopover"
                placement="bottom-start"
                width="240"
                trigger="click">
                <div class="menu-items-wrapper">
                  <el-checkbox :indeterminate="tableMenuItemData.checkAllIm" v-model="tableMenuItemData.checkAll" label="全选" @change="hanldeTableMenuCheckAll"></el-checkbox>
                  <el-checkbox-group class="checkbox-group" v-model="tableMenuItemData.checkList" @change="handleTableMenuItemChange">
                    <el-checkbox v-for="(item, index) in tableMenuItemData.list" :label="item.label" :disabled="item.disabled" :checked="item.checked" :key="index"></el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-popover>
            </el-button>
          </el-col>
          <el-col :span="12" style="text-align:right;">
            <el-button size="small" @click="handleImportStudent" v-if="classData.startStatus != 2 && roleType != 99">学员分班</el-button>
            <el-button size="small" @click="handleExportStudent" v-if="roleType != 99">导出学员</el-button>
          </el-col>
        </el-row>
      </div>
      <!--tableList-->
      <div class="table_list" v-if="train_class_studentCK.total">
        <el-table-two
          :data="train_class_studentCK.list"
          empty-text="该班暂无学员"
          stripe
          @sort-change="handelOrder"
          :span-method="mergeRow"
          style="width: 834px">
          <el-table-col
            label="姓名"
            align="center"
            fixed
            sortable
            :show-overflow-tooltip="true"
            min-width="99">
            <template slot-scope="scope">
              <span v-if="roleType == 99">{{ scope.row.name }}</span>
              <router-link :to="{path: '/training/student/detail/' + scope.row.studentId}" class="alink_color" v-else>{{ scope.row.name }}</router-link>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.sex"
            align="center"
            :show-overflow-tooltip="true"
            label="性别"
            min-width="68">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-else-if="scope.row.sex == 2">女</span>
              <span v-else>-</span>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.age"
            label="年龄"
            sortable
            align="center"
            :show-overflow-tooltip="true"
            min-width="68">
            <template slot-scope="scope">
              <p>{{scope.row.age ? scope.row.age : '-'}}</p>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.schoolName"
            prop="schoolName"
            align="center"
            :show-overflow-tooltip="true"
            label="报名校区"
            min-width="160">
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.signupTime"
            prop="signupTime"
            align="center"
            :show-overflow-tooltip="true"
            label="报名时间"
            min-width="120">
            <template slot-scope="scope">
              <span>{{scope.row.signupTime | FormatDate('yyyy-MM-dd')}}</span>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.donateTimes"
            prop="donateTimes"
            align="center"
            :show-overflow-tooltip="true"
            :render-header="renderHtmlHeader"
            label="赠课数量<br />（已上/共）"
            min-width="90">
            <template slot-scope="scope">
              <span>{{scope.row.usedDonateTimes+'/'+scope.row.donateTimes}}</span>
              <el-dropdown v-if="scope.row.donateTimes" @command="handleMenuCommand" type="link" size="mini">
                <span class="el-dropdown-link">
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{type: 'destroy', row: scope.row}" class="set_downsize" v-if="scope.row.showConsumeDonate">销赠课</el-dropdown-item><!--showConsumeDonate(0-不显示，1-显示)-->
                  <el-dropdown-item :command="{type: 'prview', row: scope.row}" class="set_downsize">赠课详情</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.timesName"
            prop="timesName"
            align="center"
            :show-overflow-tooltip="true"
            label="次课类型"
            min-width="130">
            <template slot-scope="scope">
              <span>{{scope.row.timesName ? scope.row.timesName : '-'}}</span>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.expireType"
            align="center"
            :show-overflow-tooltip="true"
            label="有效期"
            min-width="190">
            <template slot-scope="scope">
              <div v-if="scope.row.expiresInfo.includes('冻结')">{{scope.row.expiresInfo}}</div>
              <div v-else>
                <p v-if="scope.row.expireType == 0 && scope.row.expiresStartTime && scope.row.expiresEndTime">{{scope.row.expiresStartTime | FormatDate('yyyy-MM-dd')}} - {{scope.row.expiresEndTime | FormatDate('yyyy-MM-dd')}}</p>
                <p v-if="scope.row.expireType == 1">不限期</p>
              </div>
              <el-button type="link" @click="handleSetClassTime(scope.row)" v-if="scope.row.classStatus != 2 && scope.row.classStatus != 3 && !scope.row.expiresInfo.includes('冻结')">{{scope.row.expireType == 0 && !scope.row.expiresStartTime && !scope.row.expiresEndTime ? '设置' : '修改'}}</el-button>
              <el-button type="link" @click="handleCommand({row: scope.row, style: 5})" v-if="scope.row.expiresInfo.includes('冻结')">修改</el-button>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.usedTimes"
            align="center"
            prop="usedTimes"
            :show-overflow-tooltip="true"
            label="销课总数<br />（次）"
            :render-header="renderHtmlHeader"
            min-width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.usedTimes">{{scope.row.usedTimes}}</span>
              <span v-else>0</span>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.remainTimes"
            align="center"
            prop="remainTimes"
            :show-overflow-tooltip="true"
            label="剩余"
            min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.times > 0" :class="scope.row.remainTimes < 6 && scope.row.timesType != 0 ? 'red_tip' : ''">{{scope.row.remainTimes + scope.row.remainUnit}}</span>
              <span v-else :class="scope.row.remainUnit == '天' && scope.row.timesType != 0 ? 'red_tip' : ''">{{scope.row.remainTimes + (scope.row.remainUnit.includes('月') ? '个' : '') + scope.row.remainUnit}}</span>
            </template>
          </el-table-col>
          <el-table-col
            v-if="tableMenuItemData.columnState.classStatus"
            align="center"
            :show-overflow-tooltip="true"
            label="上课状态"
            min-width="100">
            <template slot-scope="scope">
              <span>{{['待上课', '上课中', '已上完', '已冻结'][scope.row.classStatus]}}</span>
              <p v-if="scope.row.remainTimes != 0 && scope.row.classStatus == 2">(已过有效期)</p>
            </template>
          </el-table-col>
          <el-table-col
            fixed="right"
            width="70"
            label="操作" align="center">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand" type="link" size="mini">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <!-- 更多 -->
                <el-dropdown-menu slot="dropdown">
                  <!-- <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 1}" class="set_downsize" v-if="false">报名</el-dropdown-item> -->
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 10}" class="set_downsize" v-if="(new Date().getTime() < (scope.row.expiresEndTime + 86400000 + scope.row.freezeDay * 86400000) || scope.row.expireType == 1 || scope.row.timesType == 0) && scope.row.classStatus != 2 && scope.row.classStatus != 3">销课</el-dropdown-item>
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 2}" class="set_downsize">赠课</el-dropdown-item>
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 3}" class="set_downsize">续费</el-dropdown-item>
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 4}" class="set_downsize" v-if="(scope.row.remainUnit == '天' && scope.row.timesType != 0) || (scope.row.remainUnit == '次' && scope.row.remainTimes < 6 && scope.row.timesType != 0) || scope.row.classStatus == 2">续费提醒</el-dropdown-item>
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 5}" class="set_downsize" v-if="(scope.row.classStatus == 0 || scope.row.classStatus == 1) && scope.row.expireType == 0">冻结</el-dropdown-item>
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 6}" class="set_downsize" v-if="scope.row.expiresInfo.includes('冻结') && scope.row.classStatus == 3">查看冻结详情</el-dropdown-item>
                  <!-- <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 7}" class="set_downsize">流失</el-dropdown-item>
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 8}" class="set_downsize">查看流失原因</el-dropdown-item> -->
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 9}" class="set_downsize" v-if="scope.row.classStatus == 2">删除</el-dropdown-item>
                  <el-dropdown-item :command="{index: scope.$index, row: scope.row, style: 11}" class="set_downsize" v-if="scope.row.usedTimes || scope.row.usedDonateTimes">撤销销课</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-col>
        </el-table-two>
      </div>
      <div class="table_list_no" v-else>该班暂无学员</div>
      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(train_class_studentCK)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
      <!--components-->
      <!--修改有效期-->
      <set-class-time v-if="isSetClassTime" v-model="isSetClassTime" :isSetClassTime="isSetClassTime" :classData="classData" :studentInfo="studentInfo" @upDate="handleSuccess"></set-class-time>
      <!--学员报名-->
      <time-sign-up v-if="isTimeSignUp" v-model="isTimeSignUp" :studentInfo="studentInfo" :classData="classData"></time-sign-up>
      <!-- 续费和续费提醒 -->
      <renew :isRenew="isRenew" :studentInfo="studentInfo" :classData="classData" v-if="isRenewClose" v-model="isRenewClose" @success="handleSuccess"/>
      <!-- 销课和撤销销课 -->
      <dispose-course :isDispose="isDispose" :studentInfo="studentInfo" :isDisposeType="isDisposeType" :classData="classData" v-if="isDisposeClose" v-model="isDisposeClose" @success="handleSuccess" />  
      <!-- 赠课 -->
      <give-lesson :isGiven="isDispose" :studentInfo="studentInfo" v-if="isGivenClose" v-model="isGivenClose" @success="handleSuccess" />  
      <!-- 流失和流失原因 -->
      <lossing-student :islossed="islossed" :studentInfo="studentInfo" v-if="islossedClose" v-model="islossedClose" @success="handleSuccess" />  
      <!-- 冻结和查看冻结详情 -->
      <freeze :isFreeze="isFreeze" :studentInfo="studentInfo" v-if="isFreezeClose" v-model="isFreezeClose" @success="handleSuccess" />
      <!--查看赠课详情-->
      <el-dialog
        title="赠课详情"
        :visible.sync="peviewDialogVisible"
        class="peview_dialog">
        <el-table :data="gridData">
          <el-table-col width="100" label="日期" align="center" :show-overflow-tooltip="true">
            <template slot-scope="thisscope">
              {{thisscope.row.createTime | FormatDate('yyyy-MM-dd')}}
            </template>
          </el-table-col>
          <el-table-col width="100" property="donateTimes" label="赠送课时数" align="center" :show-overflow-tooltip="true"></el-table-col>
          <el-table-col width="180" label="有效期" align="center" :show-overflow-tooltip="true">
            <template slot-scope="thisscope">{{thisscope.row.expiresStartTime | FormatDate('yyyy-MM-dd')}} - {{thisscope.row.expiresEndTime | FormatDate('yyyy-MM-dd')}}</template>
          </el-table-col>
          <el-table-col property="donateReason" label="赠送原因" align="center" :show-overflow-tooltip="true"></el-table-col>
          <el-table-col width="180" property="" label="销课情况" align="center" :show-overflow-tooltip="true">
            <template slot-scope="thisscope">{{showDestoryList(thisscope.row.consumeSchedules)}}</template>
          </el-table-col>
          <el-table-col width="70" property="" label="已销课" align="center" :show-overflow-tooltip="true">
             <template slot-scope="thisscope">{{thisscope.row.usedDonateTimes + '/' + thisscope.row.donateTimes}}</template>
          </el-table-col>
          <el-table-col width="95" property="date" label="使用状态" align="center" :show-overflow-tooltip="true">
            <template slot-scope="thisscope">{{['待使用', '使用中', '超时未使用', '已使用'][thisscope.row.useStatus]}}</template>
          </el-table-col>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import trainApi from 'api/train'
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
import {parseTime, downloadFile, countArr} from 'utils'
import renew from './components/Renew'
import SetClassTime from './components/SetClassTime'
import TimeSignUp from './components/TimeSignUp'
import DisposeCourse from '../student/components/DisposeCourse'
import GiveLesson from './components/GiveLesson'
// import LossingStudent from './components/LossingStudent'
import Freeze from './components/Freeze'
import { ElTable, ElTableColumn } from 'element-table'
import Situation from './components/Situation'
// 显示项目保存本地数据KEY
const TABLE_MENU_STORAGE_KEY = 'TABLE_MENU_STORAGE_KEY'

export default {
  mixins: [pagingList],
  components: {
    renew,
    SetClassTime,
    TimeSignUp,
    DisposeCourse,
    GiveLesson,
    // LossingStudent,
    Freeze,
    'el-table-two': ElTable,
    'el-table-col': ElTableColumn,
    Situation
  },
  computed: {
    ...mapGetters({
      train_class_studentCK: 'train_class_studentCK',
      train_scholl_type_list: 'train_scholl_type_list'
    }),
    getSchool () {
      let schoolStr = []
      this.classData.trainSchoolList.forEach((item) => {
        schoolStr.push(item.schoolName)
      })
      return schoolStr.join('、')
    },
    manageList () { // 主教练
      let result = []
      if (this.classData && this.classData.classCycle) {
        this.classData.classCycle.forEach(cycle => {
          if (result.indexOf(cycle.manager) === -1) {
            result.push(cycle.manager)
          }
        })
      }
      return result
    },
    assistCoachList () { // 助教
      let result = []
      if (this.classData && this.classData.classCycle) {
        this.classData.classCycle.forEach(cycle => {
          cycle.listAssistantCoach.forEach(assist => { // 助教
            if (result.indexOf(assist) === -1) {
              result.push(assist)
            }
          })
        })
      }
      return result
    },
    adviserList () { // 顾问
      let result = []
      if (this.classData && this.classData.classCycle) {
        this.classData.classCycle.forEach(cycle => {
          cycle.listCounselor.forEach(counselor => { // 顾问
            if (result.indexOf(counselor) === -1) {
              result.push(counselor)
            }
          })
        })
      }
      return result
    }
  },
  created () {
    // 初始化显示项目数据
    this._initTableMenuData()
    let typeScholl = new Promise((resolve, reject) => {
      if (this.$store.dispatch('train_scholl_type_list', {courseId: this.$route.query.crruid})) {
        resolve()
      }
    })
    typeScholl.then(() => {
      this.form.campus = this.query.schoolIds ? this.query.schoolIds.split(',').map((value) => {
        return Number(value)
      }) : []
    })
    this.roleType = localStorage.getItem('role_type')
    trainApi.trainClassInfoShow({
      id: this.$route.query.id
    }).then((res) => {
      this.classData = res.data
    })
  },
  mounted () {
    this.form.classState = this.query.studentClassStatuses ? this.query.studentClassStatuses.split(',') : []
    this.form.isRemind = this.query.isRemindRenew
    this.form.isExpires = this.query.isExpiresStudent
    this.form.isTrailClass = this.query.isTrailClass
    this.form.studentName = this.query.studentName
  },
  watch: {
    'form.campus' (value) {
      this.query.schoolIds = value.toString()
    },
    'form.classState' (value) {
      this.query.studentClassStatuses = value.toString()
    },
    'form.isRemind' (value) {
      this.query.isRemindRenew = value
    },
    'form.isExpires' (value) {
      this.query.isExpiresStudent = value
    },
    'form.isTrailClass' (value) {
      this.query.isTrailClass = value
    },
    'form.studentName' (value) {
      this.query.studentName = value
    },
    train_class_studentCK () {
      let obj = countArr(this.train_class_studentCK.list)
      this.train_class_studentCK.list = obj.arr
      this.distinctPerson = obj.count
    }
  },
  data () {
    return {
      studentInfo: {}, // 学生数据
      isRenew: false,
      isRenewClose: false,
      isSetClassTime: false,
      isTimeSignUp: false,
      isDispose: false,
      isDisposeClose: false,
      isDisposeType: 0, // 销课类型（0-正常课，1-赠课）
      isGiven: false,
      isGivenClose: false,
      islossed: false,
      islossedClose: false,
      isFreeze: false,
      isFreezeClose: false,
      courseName: '',
      title: '班级详情',
      roleType: '',
      query: this.getQuery({
        classId: this.$route.query.id
      }),
      form: {
        campus: [],
        classState: [],
        isRemind: 0,
        isExpires: 0,
        isTrailClass: 0,
        studentName: ''
      },
      classData: {},
      tableData: [],
      orderStr: 1,
      sortStr: 1,
      gridData: [],
      distinctPerson: 0,
      gradeDetailState: false, // 班级概况显示隐藏状态
      tableMenuItemData: {
        list: [],
        columnState: {},
        checkAllIm: false, // 全选不稳定状态
        checkAll: false, // 全选状态
        checkList: [] // 显示项目选中列表
      },
      peviewDialogVisible: false // 赠课详情弹出层
    }
  },
  methods: {
    fetch (query) {
      this.$store.dispatch('train_class_studentCK', query)
    },
    getParenTime (time) {
      return parseTime(time, '{h}:{i}')
    },
    handleMenuCommand (command, row) { // 销赠课，赠课详情
      if (command.type === 'destroy') { // 销赠课
        this.studentInfo = Object.assign({isClassCancelDispose: 0, isClassDispose: true}, command.row)
        this.isDisposeClose = true
        this.isDispose = true
        this.isDisposeType = 1
      } else { // 赠课详情
        this.handleDonlist(command.row)
        this.peviewDialogVisible = true
      }
    },
    handleCommand (command) {
      let obj = {
        1: (row) => {
          this.isTimeSignUp = true
          this.studentInfo = row
        },
        2: (row) => {
          this.isGiven = true
          this.isGivenClose = true
          this.studentInfo = row
        },
        3: (row) => {
          this.isRenewClose = true
          this.isRenew = true
          this.studentInfo = row
        },
        4: (row) => {
          this.isRenewClose = true
          this.isRenew = false
          this.studentInfo = row
        },
        5: (row) => {
          this.studentInfo = row
          this.isFreezeClose = true
          this.isFreeze = true
        },
        6: (row) => {
          this.studentInfo = row
          this.isFreezeClose = true
          this.isFreeze = false
        },
        7: (row) => {
          this.studentInfo = row
          this.islossedClose = true
          this.islossed = true
        },
        8: (row) => {
          this.studentInfo = row
          this.islossedClose = true
          this.islossed = false
        },
        9: (row) => {
          this.$msgbox({
            title: '温馨提示',
            message: <div style="word-break: break-all; line-height: 25px; width: 180px;">
              <div>确认删除吗？</div>
              <div>删除后，将不可恢复</div>
            </div>,
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            trainApi.studentDelete({id: row.studentClassId}, {
              successMsg: '删除成功'
            }).then(res => {
              this.fetch(this.query)
            })
          }).catch(() => {})
        },
        10: (row) => {
          this.studentInfo = Object.assign({isClassCancelDispose: 0, isClassDispose: true}, row)
          this.isDisposeClose = true
          this.isDispose = true
          this.isDisposeType = 0
        },
        11: (row) => {
          this.studentInfo = Object.assign({isClassCancelDispose: 1, isClassDispose: true}, row)
          this.isDisposeClose = true
          this.isDispose = false
        }
      }
      obj[command.style](command.row)
    },
    handleImportStudent () { // 导入学员
      this.$router.push({path: '/training/class/addtimestudent', query: {courseId: this.$route.query.crruid, classId: this.$route.query.id, classesId: this.classData.classesId}})
    },
    handleSetClassTime (row) { // 修改有效期
      this.studentInfo = row
      this.isSetClassTime = true
    },
    handelOrder (column) { // 排序
      this.sortStr = column.order === 'descending' ? 2 : 1
      this.orderStr = column.prop === 'age' ? 2 : 1
      this.query.sort = this.sortStr
      this.query.order = this.orderStr
      this.fetch(this.query)
    },
    handleExportStudent () { // 导出班级学员
      let fileName = this.classData.trainClassName + ' 班级学员名单.xls'
      let url = '/api/train/student/class/classStudentExport?classId=' + this.$route.query.id + '&className=' + this.classData.trainClassName + '&order=' + this.orderStr + '&sort=' + this.sortStr
      downloadFile(url, fileName)
    },
    handleSuccess () {
      this.fetch(this.query)
    },
    handleDonlist (row) {
      trainApi.donateLessonList({
        studentSignupId: row.studentSignupId
      }).then((res) => {
        this.gridData = res.data
      })
    },
    /*
     * rowspan: 0,
     * colspan: 0 代表不渲染
    */
    mergeRow ({ row, column, rowIndex, columnIndex }) {
      /**
       * 姓名暂时不会列入显示隐藏 无需处理默认合并
       * 性别 和 年龄会列入显示项目，如隐藏则不合并 根据显示项目的选中列表是否含有判断
       * 针对性别 和 年龄 暂时写死，后期有增加在处理
       */
      let columnNum = 0
      let checkList = this.tableMenuItemData.checkList
      if (checkList.indexOf('性别') !== -1 && checkList.indexOf('年龄') !== -1) {
        columnNum = 2
      } else if (checkList.indexOf('性别') !== -1 || checkList.indexOf('年龄') !== -1) {
        columnNum = 1
      }
      if (row.count > 1 && columnIndex <= columnNum) {
        if (row.isFirst) { // isFirst重复数据的第一条
          if (row.count > 1) {
            return {
              rowspan: row.count,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    renderHtmlHeader (createElement, { column }) {
      return createElement(
        'div',
        {
          domProps: {
            innerHTML: column.label
          }
        }
      )
    },
    _initTableMenuData () {
      //  data中的状态需要
      let TABLE_MENU_ITEMS = [
        { name: 'name', label: '姓名', disabled: true, checked: true },
        { name: 'command', label: '操作', disabled: true, checked: true },
        { name: 'sex', label: '性别', disabled: false, checked: false },
        { name: 'age', label: '年龄', disabled: false, checked: false },
        { name: 'schoolName', label: '报名校区', disabled: false, checked: false },
        { name: 'signupTime', label: '报名时间', disabled: false, checked: false },
        { name: 'donateTimes', label: '赠课数量', disabled: true, checked: true },
        { name: 'timesName', label: '次课类型', disabled: false, checked: false },
        { name: 'expireType', label: '有效期', disabled: false, checked: false },
        { name: 'usedTimes', label: '销课总数', disabled: false, checked: false },
        { name: 'remainTimes', label: '剩余', disabled: false, checked: false },
        { name: 'classStatus', label: '上课状态', disabled: false, checked: false }
      ]
      const TABLE_COLUMN_STATE = {} // 初始化表格菜单状态
      const DEFAULT_CHECK_ITEM = ['销课总数', '剩余', '上课状态']
      const TABLE_MENU_STORAGE_ITEMS = localStorage.getItem(TABLE_MENU_STORAGE_KEY) ? JSON.parse(localStorage.getItem(TABLE_MENU_STORAGE_KEY)) : DEFAULT_CHECK_ITEM
      TABLE_MENU_ITEMS = TABLE_MENU_ITEMS.map(item => {
        item.checked = item.disabled || TABLE_MENU_STORAGE_ITEMS.indexOf(item.label) !== -1
        TABLE_COLUMN_STATE[item.name] = item.checked
        return item
      })
      this.tableMenuItemData.list = TABLE_MENU_ITEMS
      this.tableMenuItemData.columnState = TABLE_COLUMN_STATE
      this.tableMenuItemData.checkAllIm = TABLE_MENU_ITEMS.filter(k => k.checked).length !== TABLE_MENU_ITEMS.length && TABLE_MENU_ITEMS.filter(k => k.checked).length > 0
      this.tableMenuItemData.checkAll = TABLE_MENU_ITEMS.filter(k => k.checked).length === TABLE_MENU_ITEMS.length
    },
    handleTableMenuItemChange (val) {
      let checkedCount = val.length
      let tableMenuList = this.tableMenuItemData.list
      this.tableMenuItemData.checkAll = checkedCount === tableMenuList.length
      this.tableMenuItemData.checkAllIm = checkedCount > 0 && checkedCount < tableMenuList.length
      tableMenuList.forEach(item => {
        this.tableMenuItemData.columnState[item.name] = Boolean(val.find(k => k === item.label))
      })
      localStorage.setItem(TABLE_MENU_STORAGE_KEY, JSON.stringify(val))
    },
    hanldeTableMenuCheckAll (event) {
      // 全选操作
      let tableMenuList = this.tableMenuItemData.list
      let checkList = event.target.checked ? tableMenuList : tableMenuList.filter(item => item.disabled && item.checked)
      this.tableMenuItemData.checkList = checkList.map(item => item.label)
      this.handleTableMenuItemChange(this.tableMenuItemData.checkList)
      // this.tableMenuItemData.checkAllIm = !event.target.checked
    },
    showDestoryList (list) { // 赠课销课情况
      let str = ''
      if (list) {
        list.forEach((item, index) => {
          str += parseTime(item.signinTime, '{y}-{m}-{d} {h}:{i}') + ' ' + item.signinerName + '；'
        })
      } else {
        str = '/'
      }
      return str
    }
  }
}
</script>
<style lang="scss">
.el-tooltip__popper.is-dark{
  max-width:600px;
}
.el-popover{
  .el-table td, .el-table th{
    line-height: 32px;
    height:32px;
    font-size: 12px;
  }
  .menu-items-wrapper{
    white-space: normal;
    .el-checkbox{
      padding: 2px 0;
    }
  }
}
.peview_dialog{
  .el-dialog--small{
    width:900px;
  }
}
a.link_class{
  font-size: 14px;
  font-weight:normal;
  color:#2a82ee;
  float:right;
}
.set_downsize{
  font-size: 12px;
  color:#2a82ee;
  line-height: 30px;
  &:hover{
    font-size: 12px;
    color:#2a82ee!important;
  }
}
.red_tip{
  color:#f30;
}
.class_show{
  border-top:1px solid #efefef;
  padding-top: 20px;
  .red_text{
    color:#f30;
  }
  .el-col{
    margin: 6px 0;
  }
  .table_list_no{
    text-align: center;
    margin: 100px 0;
  }
  .table_title{
    margin-top:25px;
    line-height: 36px;
    span.tl{
      font-size: 18px;
    }
    .menu-button{
      margin-left: 15px;
    }
  }
  .ctime_serach{
    margin-top: 25px;
    padding-top:25px;
    padding-bottom:25px;
    border-bottom:1px solid #efefef;
    .el-form-item{
      margin-bottom: 0;
    }
  }
  .table_list{
    .el-dropdown{
      font-size: 12px;
      .el-dropdown-link{
        color:#2a82ee;
        &:hover{
          cursor: pointer;
        }
      }
    }
    .cell{
      font-size:12px;
      padding:5px 10px;
    }
    .el-button--small{
      padding-top:5px;
      padding-bottom:5px;
    }
    .el-button--text,.alink_color{
      color:#2a82ee;
      &:hover{
        cursor: pointer;
      }
    }
    .el-button--link{
      line-height:18px;
    }
  }
}

</style>
